 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon" type="image/ico" href="media/images/favicon.ico">
        
        <title>Using Custom JEditable inline Editors in DataTable</title>
        <style type="text/css" title="currentStyle">
            @import "media/css/demo_page.css";
            @import "media/css/demo_table.css";
            @import "media/css/themes/base/jquery-ui.css";
            @import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
        </style>

        <script src="media/js/jquery.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.editable.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.time.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.datepicker.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.checkbox.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.ajaxUpload.js" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                $('#example').dataTable().makeEditable({
                                                //sUpdateURL: "UpdateData.php", //On the code.google.com POST request is not supported so this line is commeted out
                                                sUpdateURL:function(value, settings)
                                                                        {
                                                                            return value; //Simulation of server-side response using a callback function
                                                                        }//Remove this line in your code
                                                ,
                                                oEditableSettings: { ajaxoptions:{ type: 'GET'} },        
                                                aoColumns: [
                                                    { 
                                                        indicator : "<img src='img/indicator.gif'>",
                                                        type      : 'datepicker',
                                                        tooltip   : "Click to edit..."
                                                    },
                                                    {},
                                                    { 
                                                        indicator : "<img src='img/indicator.gif'>",
                                                        type      : 'ajaxupload',
                                                        submit    : 'Upload',
                                                        cancel    : 'Cancel',
                                                        tooltip   : "Click to upload..."
                                                    },
                                                    {
                                                        type:   'checkbox',
                                                        submit    : 'Ok',
                                                        cancel    : 'Cancel',
                                                        checkbox: { trueValue: 'Yes', falseValue: 'No' }
                                                    },
                                                    { 
                                                        indicator : "<img src='img/indicator.gif'>",
                                                        type      : 'time',
                                                        submit    : 'OK',
                                                        tooltip   : "Click to edit...",
                                                        sUpdateURL: "UpdateTimeCellError.php",
                                                        ajaxoptions:{ type: 'GET'}
                                                    }
                                                
                                                ]

                                        });
                
            } );
        </script><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

    </head>




<body id="dt_example">
        <div id="container">
            <a href="index.html">Home</a>
            <a href="http://code.google.com/p/jquery-datatables-editable/wiki/NonStandardEditors">Wiki</a> 
            <div class="full_width big">

                Editable DataTable example - Editing Inline Cells using JEditable Custom Editor Types
            </div>
            
    
            
            
            <h1>Live example</h1>

            


            <div id="demo">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Date</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Final</th>
            <th>Time</th>
        </tr>
    </thead>
    <tfoot>
        <tr>

            <th>Date</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Final</th>
            <th>Time</th>
        </tr>

    </tfoot>
    <tbody>
        <tr class="odd_gradeX" id="2">
            <td class="read_only">02/03/2011</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">Yes</td>

            <td class="center">16:45</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td class="first">08/04/2011</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">Yes</td>

            <td class="center">12:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">08/04/2011</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">08/04/2011</td>
            <td class="read_only">Internet Explorer 6(read only cell)</td>
            <td>Win 98+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">08/04/2011</td>
            <td>Internet Explorer 7</td>
            <td class="read_only">Win XP SP2+(read only cell)</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">08/04/2011</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td class="center">No</td>

            <td class="center read_only">09:45</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td>03/07/2011</td>
            <td>Firefox 1.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Firefox 1.5</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Firefox 2.0</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Firefox 3.0</td>
            <td>Win 2k+ / OSX.3+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Camino 1.0</td>
            <td>OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Camino 1.5</td>
            <td>OSX.3+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Netscape 7.2</td>
            <td>Win 95+ / Mac OS 8.6-9.2</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Netscape Browser 8</td>
            <td>Win 98SE+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Netscape Navigator 9</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.0</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.1</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.2</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.3</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.4</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.5</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.6</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.7</td>
            <td>Win 98+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Mozilla 1.8</td>
            <td>Win 98+ / OSX.1+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">10/07/2011</td>
            <td>Seamonkey 1.1</td>
            <td>Win 98+ / OSX.2+</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">10/07/2011</td>
            <td>Epiphany 2.20</td>
            <td>Gnome</td>
            <td class="center">Yes</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">11/10/2011</td>
            <td>Safari 1.2</td>
            <td>OSX.3</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">11/10/2011</td>
            <td>Safari 1.3</td>
            <td>OSX.3</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">11/10/2011</td>
            <td>Safari 2.0</td>
            <td>OSX.4+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">11/10/2011</td>
            <td>Safari 3.0</td>
            <td>OSX.4+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">11/10/2011</td>
            <td>OmniWeb 5.5</td>
            <td>OSX.4+</td>
            <td class="center">420</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">11/10/2011</td>
            <td>iPod Touch / iPhone</td>
            <td>iPod</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">11/10/2011</td>
            <td>S60</td>
            <td>S60</td>
            <td class="center">413</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/10/2011</td>
            <td>Opera 7.0</td>
            <td>Win 95+ / OSX.1+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/10/2011</td>
            <td>Opera 7.5</td>
            <td>Win 95+ / OSX.2+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/10/2011</td>
            <td>Opera 8.0</td>
            <td>Win 95+ / OSX.2+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/10/2011</td>
            <td>Opera 8.5</td>
            <td>Win 95+ / OSX.2+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/10/2011</td>
            <td>Opera 9.0</td>
            <td>Win 95+ / OSX.3+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/10/2011</td>
            <td>Opera 9.2</td>
            <td>Win 88+ / OSX.3+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/10/2011</td>
            <td>Opera 9.5</td>
            <td>Win 88+ / OSX.3+</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/10/2011</td>
            <td>Opera for Wii</td>
            <td>Wii</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/10/2011</td>
            <td>Nokia N800</td>
            <td>N800</td>
            <td class="center">No</td>

            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/10/2011</td>
            <td>Nintendo DS browser</td>
            <td>Nintendo DS</td>
            <td class="center">No</td>

            <td class="center">C/A<sup>1</sup></td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td class="first">01/08/2011</td>
            <td>Konqureror 3.1</td>
            <td>KDE 3.1</td>

            <td class="center">No</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">01/08/2011</td>
            <td>Konqureror 3.3</td>
            <td>KDE 3.3</td>

            <td class="center">No</td>
            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">01/08/2011</td>
            <td>Konqureror 3.5</td>
            <td>KDE 3.5</td>

            <td class="center">No</td>
            <td class="center">08:30</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td class="first">01/08/2011</td>
            <td>Internet Explorer 4.5</td>
            <td>Mac OS 8-9</td>

            <td class="center">No</td>
            <td class="center">16:45</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td class="first">01/08/2011</td>
            <td>Internet Explorer 5.1</td>
            <td>Mac OS 7.6-9</td>

            <td class="center">Yes</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="odd_gradeC" id="3">
            <td class="first">01/08/2011</td>
            <td>Internet Explorer 5.2</td>
            <td>Mac OS 8-X</td>

            <td class="center">Yes</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td class="first">11/08/2011</td>
            <td>NetFront 3.1</td>
            <td>Embedded devices</td>

            <td class="center">No</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td class="first">11/08/2011</td>
            <td>NetFront 3.4</td>
            <td>Embedded devices</td>

            <td class="center">No</td>
            <td class="center">08:30</td>
        </tr>
        <tr class="even_gradeX" id="11">
            <td class="first">11/08/2011</td>
            <td>Dillo 0.8</td>
            <td>Embedded devices</td>

            <td class="center">No</td>
            <td class="center">16:45</td>
        </tr>
        <tr class="odd_gradeX" id="2">
            <td class="first">11/08/2011</td>
            <td>Links</td>
            <td>Text only</td>

            <td class="center">No</td>
            <td class="center">16:45</td>
        </tr>
        <tr class="even_gradeX" id="11">
            <td class="first">11/08/2011</td>
            <td>Lynx</td>
            <td>Text only</td>

            <td class="center">No</td>
            <td class="center">16:45</td>
        </tr>
        <tr class="odd_gradeC" id="3">
            <td class="first">11/08/2011</td>
            <td>IE Mobile</td>
            <td>Windows Mobile 6</td>

            <td class="center">No</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td class="first">11/08/2011</td>
            <td>PSP browser</td>
            <td>PSP</td>

            <td class="center">No</td>
            <td class="center">12:30</td>
        </tr>
        <tr class="odd_gradeU" id="10">
            <td class="first">01/01/2011</td>
            <td>All others</td>
            <td>-</td>

            <td class="center">No</td>
            <td class="center">18:15</td>
        </tr>
    </tbody>
</table>

            </div>
            <div class="spacer"></div>

        

            <h1>Other examples</h1>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="inline-edit.html">Inline cell editing</a></li>
                <li><a href="delete-record.html">Select/Delete rows</a></li>
                <li><a href="addingrecords.html">Adding a new record</a></li>
                <li><a href="custom-editors.html">Custom editors</a></li>
                <li><a href="inline-validation.html">Validation of inline cells</a></li>
                <li><a href="events.html">Pre-processing and post-processing events</a></li>
                <li><a href="customization.html">User interface customizations</a></li>
                <li><a href="custom-messages.html">Customization of message dialogs</a></li>
                <li><a href="customize-buttons.html">Customization of buttons and form</a></li>
                <li><a href="configure-dom.html">Two different tables on the same page</a></li>
                <li><a href="ajax.html">Using Ajax source</a></li>
            </ul>
            
            <div id="footer" style="text-align:center;">
                <span style="font-size:10px;">
                    DataTables Editable &copy; Jovan Popovic 2010-2012.<br>
                </span>
            </div>
        </div>
    </body>





</html>